<template>
    <tableLayout :columns="columns" :get="getData" :params="params"
        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" ref="layout">
        <template #button>
            <a-button type="primary" style="margin-left: 20px" @click='add'>新增</a-button>
            <a-button style="margin-left: 20px" @click="edit" :disabled="selectedRowKeys.length !== 1">修改</a-button>
            <a-button type="primary" style="margin-left: 20px" @click="del" :disabled="selectedRowKeys.length !== 1"
                danger>删除</a-button>
            <MenuToolBar>
                <template #button>
                    <a-button type="primary" style="margin-left: 20px" @click='add'>新增</a-button>
                    <a-button style="margin-left: 20px" @click="edit"
                        :disabled="selectedRowKeys.length !== 1">修改</a-button>
                </template>
            </MenuToolBar>
        </template>

        <template #operationMore="item">
            <a @click="edit(null, item.value.record)">编辑</a>
            <a-divider type="vertical" />
            <a @click="del(null, item.value.record.Id)">删除</a>
        </template>

    </tableLayout>

    <a-modal :title="formState.Id ? '编辑字典' : '新增字典'" v-model:visible="model_visible" :confirm-loading="confirmLoading"
        @ok="model_handleOk" width="900px">
        <a-form ref="formRef" :model="formState" :label-col="labelCol" :wrapper-col="wrapperCol" :rules="rules"
            layout="inline" class="comform">
            <a-form-item label="名称" style="width: calc(50% - 20px);" class="form__item" name="Name">
                <a-input v-model:value="formState.Name" />
            </a-form-item>
            <a-form-item label="字典编码" style="width: calc(50% - 20px);" class="form__item" name="Code">
                <a-input v-model:value="formState.Key" />
            </a-form-item>
            <a-form-item label="字典值" style="width: calc(50% - 20px);" class="form__item" name="Val">
                <a-input v-model:value="formState.Val" />
            </a-form-item>
            <a-form-item label="编号" style="width: calc(50% - 20px);" class="form__item" name="No">
                <a-input v-model:value="formState.No" />
            </a-form-item>
            <a-form-item label="状态" style="width: calc(50% - 20px);" class="form__item" name="IsValid">
                <a-radio-group name="radioGroup" v-model:value="formState.IsValid">
                    <a-radio :value="true">启用</a-radio>
                    <a-radio :value="false">停用</a-radio>
                </a-radio-group>
            </a-form-item>

            <a-form-item label="备注" style="width: calc(100% - 20px);" class="form__item" name="Remark"
                :labelCol="{ span: 3 }" :wrapperCol="{ span: 21 }">
                <a-textarea v-model:value="formState.Remark" placeholder="备注" :rows="4" />
            </a-form-item>
        </a-form>
    </a-modal>
</template>

<script lang="ts" setup>
import { getData, delDict, setDict } from '@/api/syssetting/dict';
import { provide, ref, h, VNode, UnwrapRef, reactive } from 'vue';
import tableLayout from '@/components/tableLayout/tableLayout.vue';
import { Layout, message } from 'ant-design-vue';
import { DictInput } from '@/types/api/syssetting/dict';
import MenuToolBar from '@/components/toolbar/menuToolBar.vue';

const layout = ref();

//表单对象
const formState: UnwrapRef<DictInput> = reactive({
    Id: '',
    Name: '',
    Val: '',
    Remark: '',
    No: 0,
    Key: '',
    IsValid: false
});

const Test = () => {
    alert("测试")
}
provide('parentMethods', { Test: Test });

//列表
const columns = [
    { title: '名称', dataIndex: 'Name' },
    { title: '编码', dataIndex: 'Key' },
    { title: '值', dataIndex: 'Val' },
    { title: '排序', dataIndex: 'No' },
    {
        title: '状态', dataIndex: 'IsValid', customRender: function ({ text }): VNode {
            return h('div', {
                style: {
                    color: 'red'
                }
            }, text ? '有效' : '无效');
        }
    }
]

// 规则
const rules = {
    Name: [{ required: true, message: '请输入名称', trigger: 'change' }],
    Key: [{ required: true, message: '请输入键', trigger: 'change' }],
    Val: [{ required: true, message: '请输入值', trigger: 'change' }]
}

let params = ref();

const add = () => {
    model_visible.value = true;
    Object.assign(formState, {
        Id: '',
        Key: '',
        Val: '',
        Name: '',
        No: 0,
        Remark: '',
        IsValid: false
    });
}

const edit = (event: any, item: any) => {
    let selectItem = item;
    if (!item) {
        if (!selectedRowKeys.value || selectedRowKeys.value.length <= 0 || selectedRowKeys.value.length > 1) {
            message.warning('请先选择一条数据!');
            return;
        }
        selectItem = selectedRows.value[0];
    }
    model_visible.value = true;
    Object.assign(formState, selectItem);
}

const del = (event: any, Id: any) => {
    let selectId = Id;
    if (!selectId) {
        if (!selectedRowKeys.value || selectedRowKeys.value.length <= 0 || selectedRowKeys.value.length > 1) {
            message.warning('请先选择一条数据!');
            return;
        }
        selectId = selectedRows.value[0].Id;
    }

    delDict({ Id: selectId }).then(() => {
        message.success("删除成功!");
        layout.value.getData();
    }).catch(err => {
        message.error(err.message || "删除失败!")
        confirmLoading.value = false;
    })
}

const model_visible = ref<boolean>(false);
const confirmLoading = ref<boolean>(false);
const formRef = ref()

const model_handleOk = () => {
    formRef.value.validate().then(() => {
        confirmLoading.value = true;
        setDict(formState).then(e => {
            message.success("添加成功！");
            confirmLoading.value = false;
            model_visible.value = false;
            layout.value.getData();
        }).catch(err => {
            message.error(err.message || "添加失败!")
            confirmLoading.value = false;
        })
    }).catch(() => {
        message.error('请检查必填项是否全部填写!');
    })
}

// 多选
const selectedRowKeys = ref<any[]>([]);
const selectedRows = ref<any[]>([]);
const onSelectChange = (keys: [], rows: any) => {
    selectedRowKeys.value = keys;
    selectedRows.value = rows;
}

const labelCol = { span: 6 };
const wrapperCol = { span: 18 };
</script>

<style lang="scss" scoped>
.comform {
    & .form__item {
        margin-bottom: 16px;

        & .ant-form-item-label {
            flex-grow: 1 !important;
            flex-shrink: 0;
        }
    }
}
</style>
<style lang="scss">
.comform {
    & .form__item {
        margin-bottom: 16px;

        & .ant-form-item-label {
            flex-grow: 1;
            flex-shrink: 0;
        }
    }
}
</style>